 <template>
  <div class="filtrate-outer-box" v-loading="loading">
    <Header @update:keyword="searchKey" />
    <div class="nav-outer">
      <div class="nav-1200 area1190">
        <span>首页</span> > <span>商城首页</span> > <span>车型列表</span> >
        <div class="nav-right">
          <span>售后政策</span>
          <i class="center-line"></i>
          <span @click="toConsult">咨询客服</span>
        </div>
      </div>
    </div>

    <!-- 筛选板块 -->
    <div class="filtrate-box">
      <div class="area1190">
        <div class="row-box flex" v-for="(item,i) in categoryData" :key="i">
          <div class="title">{{item.name}}</div>
          <div class="content flex-1" >
            <ul class="scene-box-ul" >
              <li
                class="filter-item"
                v-for="(val,index) in item.inputList.split(',')"
                :key="index"
                :class="{ c_active: color.indexOf(item.id+'/'+val) !== -1 }"
                @click="condition(val,item.id,item.productAttributeCategoryId)">
                {{ val }} 
              </li>
            </ul>
          </div>
        </div>

        <!--  -->
        <!-- <div class="row-box flex">
          <div class="title">车型</div>
          <div class="content flex-1">
            <ul class="scene-box-ul">
              <li
                class="filter-item"
                v-for="val in filtrDate.carType"
                :key="val.name"
                :class="{ c_active: val.name == carTypeIndex }"
                @click="
                  selectCarType(
                    val.name,
                    val.attribute_value,
                    val.productAttributeCategoryId
                  )
                "
              >
                {{ val.name }}
              </li>
            </ul>
          </div>
        </div>

        <div class="row-box flex">
          <div class="title">座位数</div>
          <div class="content flex-1">
            <ul class="scene-box-ul">
              <li
                class="filter-item"
                :class="{ c_active: val.name == seatNumIndex }"
                @click="
                  selectSeatNum(
                    val.name,
                    val.attribute_value,
                    val.productAttributeCategoryId
                  )
                "
                v-for="val in filtrDate.seatNum"
                :key="val.name"
              >
                {{ val.name }}
              </li>
            </ul>
          </div>
        </div>

        <div class="row-box flex">
          <div class="title">车长</div>
          <div class="content flex-1">
            <ul class="scene-box-ul">
              <li
                class="filter-item"
                :class="{ c_active: val.name == carLongIndex }"
                @click="
                  selectCarLong(
                    val.name,
                    val.attribute_value,
                    val.productAttributeCategoryId
                  )
                "
                v-for="val in filtrDate.carLong"
                :key="val.name"
              >
                {{ val.name }}
              </li>
            </ul>
          </div>
        </div> -->

        <div class="row-box flex">
          <div class="title">意向金</div>
          <div class="content flex-1">
            <ul class="scene-box-ul" style="text-align: left">
              <li class="filter-item" @click="noPrice()">不限</li>
              <input
                class="price-input left-input"
                type="text"
                v-model="startPrice"
              />
              <span class="line-between">—</span>
              <input class="price-input" type="text" v-model="endPrice" />
              <span class="search-price" @click="searchList">确定</span>
            </ul>
          </div>
        </div> 
      </div>
    </div>

    <!-- 排序 -->
    <div class="sort-outer-box">
      <div class="sort1190 area1190 flex">
        <div class="default-sort sort-item">默认排序</div>
        <!-- <div
          class="car-long sort-item"
          style="cursor: pointer"
          @click="sorts(1)"
        >
          车长<i
            v-show="carLongSort == 'desc' && nowButton == 1"
            class="el-icon-bottom"
          ></i
          ><i
            v-show="carLongSort == 'asc' && nowButton == 1"
            class="el-icon-top"
          ></i>
        </div>
        <div
          class="seat-num sort-item"
          style="cursor: pointer"
          @click="sorts(2)"
        >
          座位数<i
            v-show="carLongSort == 'desc' && nowButton == 2"
            class="el-icon-bottom"
          ></i
          ><i
            v-show="carLongSort == 'asc' && nowButton == 2"
            class="el-icon-top"
          ></i>
        </div> -->
      </div>
    </div>

    <!-- 列表 -->
    <div class="car-list-box">
      <div class="area1190">
        <div
          class="type-item"
          v-for="(product, productInedx) in filtrDate.listData"
          :key="productInedx"
          @click="goDetails(product)"
        >
          <img class="car-img" :src="product.pic | nopic" alt="" />
          <h4 class="car-name">{{ product.name }}</h4>
          <p class="car-des">{{ product.subTitle }}</p>
          <p class="car-price">
            定向金 ￥<span class="price">{{ product.price }}</span>
          </p>
          <el-button
            class="go-shop-btn"
            type="danger"
            size="medium"
            round
            @click="goDetails(product)"
            >立即抢购</el-button
          >
        </div>
      </div>
    </div>

    <div class="pagination-box">
      <el-pagination
        background
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="prePage"
        @next-click="nextPage"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="persizes"
        :total="total"
      ></el-pagination>
    </div>

    <Footer />
  </div>
</template>

<script>

import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import empty from "../utils/common";
import {setCookie,getCookie} from "../utils/cookieUtil";
const _config = {
  name: [],
  attribute: []
}
export default {
  name: "CarCenter",
  components: {
    Header,
    Footer,
  },
  inject: ["reload"],
  data() {
    return {
      color: [],//点击事件颜色
      loading: false,
      currentPage: 1,
      total: 1,
      persizes: 8,
      carTypeIndex: null,
      // productAttributeId: null,
      // productAttributeValue: null,
      attributeIdList:[],//新增多选数组
      valueList:[],//新增多选数组
      seatNumIndex: null,
      seatNumId: null,
      carLongIndex: null,
      carLongId: null,
      categoryId: null,
      endPrice: null,
      startPrice: null,
      carLongSort: "asc",
      seatSort: "asc",
      // 筛选模拟数据
      filtrDate: {
        carType: [],
        seatNum: [],
        carLong: [],
      },
      // 列表数据
      listData: [],
      nowButton: "",
      keyword: "",
      categoryData:{},
    };
  },
  created() {
    //获取首页过来的变量
    if (!empty(this.$route.query.attrname)) {
      let attrname = this.$route.query.attrname;
      let attrid = this.$route.query.attrid;
      this.productAttributeValue = attrname;
      this.productAttributeId = attrid;
    }
    let keyword = this.$route.query.keyword;
    if (!empty(keyword)) {
      this.keyword = keyword;
    } else {
      this.keyword = "";
    }

    this.category();
    this.productList();
  },
  methods: {
    sorts(index) {
      this.nowButton = index;
      this.productAttributeId = getCookie("productAttributeId");
      this.productAttributeValue = getCookie("productAttributeValue");
      if (this.carLongSort == "asc") {
        this.carLongSort = "desc";
      } else {
        this.carLongSort = "asc";
      }
      this.productList();
    },
    // selectCarType(name, id, categoryId) {
    //   window.console.log(categoryId);
    //   this.productAttributeValue = name;
    //   this.productAttributeId = id;
    //   this.carTypeIndex = name;
    //   this.carTypeId = id;
    //   // this.categoryId = categoryId;
    //   this.seatNumIndex = null;
    //   this.seatNumId = null;
    //   this.carLongId = null;
    //   this.carLongIndex = null;

    //   this.productList();
    // },
    // selectSeatNum(name, id, categoryId) {
    //   window.console.log(categoryId);
    //   this.productAttributeValue = name;
    //   this.productAttributeId = id;
    //   this.seatNumIndex = name;
    //   this.seatNumId = id;
    //   // this.categoryId = categoryId;

    //   this.carTypeIndex = null;
    //   this.carTypeId = null;
    //   this.carLongId = null;
    //   this.carLongIndex = null;
    //   this.productList();
    // },
    // selectCarLong(name, id, categoryId) {
    //   window.console.log(categoryId);
    //   this.productAttributeValue = name;
    //   this.productAttributeId = id;
    //   this.carLongIndex = name;
    //   this.carLongId = id;
    //   // this.categoryId = categoryId;

    //   this.carTypeIndex = null;
    //   this.carTypeId = null;
    //   this.seatNumId = null;
    //   this.seatNumIndex = null;
    //   this.productList();
    // },
    // 筛选条件点击事件
    condition(name,attributeId,categoryId){
      let selData = [];
      this.color.push(attributeId+'/'+name);
      if(_config.attribute.includes(attributeId)) {
        _config.name.splice(_config.attribute.indexOf(attributeId),1,name);
      } else {
        _config.attribute.push(attributeId);
        _config.name.push(name);
      }
      _config.attribute.forEach((item,index) => {
        selData.push(`${item}/${_config.name[index]}`);
      })
      this.color = selData;
      setCookie("color",name);
      setCookie("productAttributeValue",name);
      setCookie("productAttributeId",attributeId);
      //this.color = getCookie("color");
      console.log("点击事件输入条件:"+name,attributeId,categoryId);
      this.productAttributeValue = _config.name;
      this.productAttributeId = _config.attribute;
      return false; // eslint-disable-next-line
      this.productList();

    },
    category() {
      let _this = this;
      this.$http
        .get("/car-center/list", {
          // projectErpCode:this.currentAgent.erp_code
        })
        .then(function (response) {
          _this.categoryData = response.data;
          //车型
          // let carType = [];
          // if (!empty(response.data[2].inputList)) {
          //   var carTypeList = response.data[2].inputList.split(",");
          //   for (let carTypeIndex in carTypeList)
          //     carType.push({
          //       id: carTypeIndex,
          //       name: carTypeList[carTypeIndex],
          //       attribute_value: response.data[2].id,
          //       productAttributeCategoryId:
          //         response.data[2].productAttributeCategoryId,
          //     });
          // }
          // _this.filtrDate.carType = carType;
          // //座位数
          // let seatNum = [];
          // if (!empty(response.data[0].inputList)) {
          //   var seatTypeList = response.data[0].inputList.split(",");
          //   for (let seatIndex in seatTypeList)
          //     seatNum.push({
          //       id: seatIndex,
          //       name: seatTypeList[seatIndex],
          //       attribute_value: response.data[0].id,
          //       productAttributeCategoryId:
          //         response.data[0].productAttributeCategoryId,
          //     });
          // }
          // _this.filtrDate.seatNum = seatNum;
          // let carLong = [];
          // if (!empty(response.data[1].inputList)) {
          //   var carLongList = response.data[1].inputList.split(",");
          //   for (let carIndex in carLongList)
          //     carLong.push({
          //       id: carIndex,
          //       name: carLongList[carIndex],
          //       attribute_value: response.data[1].id,
          //       productAttributeCategoryId:
          //         response.data[1].productAttributeCategoryId,
          //     });
          // }
          // _this.filtrDate.carLong = carLong;
        });
    },
    searchKey(search) {
      if (!empty(search)) {
        this.keyword = search;
      } else {
        this.keyword = "";
      }
      this.productList();
    },
    productList() {
      let _this = this;
      _this.loading = true;
      if (_this.productAttributeValue == "不限") {
        _this.productAttributeValue = null;
        _this.productAttributeId = null;
      }
      if (empty(this.keyword)) {
        this.keyword = "";
      }
      this.$http
        .post("/car-center/productlist", {
          keyword: _this.keyword,
          // column: _this.productAttributeValue,
          columnOrder: _this.carLongSort,
          endPrice: _this.endPrice,
          startPrice: _this.startPrice,
          pageNum: _this.currentPage,
          pageSize: _this.persizes,
          valueList:_this.productAttributeValue!=null ? _this.productAttributeValue : null,
          attributeIdList:_this.productAttributeId!=null ? _this.productAttributeId : null,
          productCategoryId: _this.categoryId,
        })
        .then(function (response) {
          _this.filtrDate.listData = response.data.list;
          _this.total = response.data.total;
          _this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.persizes = val;
      this.productList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.productList();
    },
    prePage() {
      this.productList();
    },
    nextPage() {
      this.productList();
    },
    goDetails(product) {
      this.$router.push({ path: "/ProductDetail", query: product });
    },
    searchList() {
      this.productList();
    },
    noPrice() {
      this.startPrice = null;
      this.endPrice = null;
      this.productList();
    },
    toConsult() {
      window.open(
        "https://tb.53kf.com/code/client/76df7a37aaeedb720ea6c829254a932a0/1",
        "name",
        "height=600, width=800, top=0, left=4, toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no, status=no"
      );
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.filtrate-box {
  margin-top: 20px;
  .row-box {
    font-size: 14px;
    height: 55px;
    line-height: 55px;
    color: #383838;
    border-bottom: 1px solid #eee;
    background: #fff;
    .title {
      width: 60px;
      text-align: right;
    }
    .scene-box-ul {
      .filter-item {
        float: left;
        margin-left: 50px;
        cursor: pointer;
      }

      .price-input {
        text-align: center;
        width: 65px;
        height: 36px;
        line-height: 55px;
        background-color: #ffffff;
        border: solid 1px #dcdcdc;
        padding: 0 10px;
      }
      .left-input {
        margin-left: 50px;
      }

      .search-price {
        display: inline-block;
        width: 85px;
        line-height: 36px;
        line-height: 36px;
        text-align: center;
        vertical-align: center;
        margin-left: 22px;
        cursor: pointer;
      }
      .line-between {
        margin: 0 10px;
      }
      .search-price {
        width: 85px;
        height: 36px;
        background-color: #ffffff;
        border: solid 1px #e01919;
        color: #e01919;
      }
      .c_active {
        color: #fc291d;
      }
    }
  }
  .row-box:nth-child(4) {
    border: 0;
  }
}
.sort-outer-box {
  margin: 20px 0;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #646464;
  .sort1190 {
    background: #fff;
    padding: 0 20px;
    width: 1150px !important;
    .sort-item {
      margin-right: 50px;
      line-height: 50px;
      background: #fff;
    }
  }
}
.car-list-box {
  overflow: hidden;
  .area1190 {
    flex-wrap: wrap;
    .type-item {
      width: 288px;
      height: 395px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      margin-bottom: 12px;
      text-align: left;
      position: relative;
      float: left;
      margin-right: 12px;

      .go-shop-btn {
        position: absolute;
        right: 20px;
        bottom: 24px;
      }

      .car-img {
        width: 100%;
        //height: 238px;
      }

      .car-left-img {
        width: 100%;
        height: 100%;
      }
      .car-name {
        padding: 0 19px;
        font-size: 18px;
        line-height: 18px;
        color: #2e2e2e;
        margin-top: 54px;
      }
      .car-des {
        padding: 0 19px;
        font-size: 14px;
        line-height: 14px;
        color: #9e9e9e;
        margin-top: 8px;
      }
      .car-price {
        padding: 0 19px;
        height: 16px;
        font-size: 14px;
        color: #cf2626;
        margin-top: 16px;
        .price {
          font-size: 20px;
          line-height: 20px;
        }
      }
    }
    .type-item:nth-child(4n) {
      margin-right: 0;
    }
  }
}

.pagination-box {
  margin: 20px 0;
}

/*手机端*/
@media (min-width: 320px) and (max-width: 800px) {
  .nav-1200 {
    padding: 0 3%;
    width: 94% !important;
    .nav-right {
      right: 3%;
    }
  }
  // 筛选
  .filtrate-box .row-box {
    height: auto;
    line-height: 35px;
    .title {
      width: 50px;
      font-weight: 600;
    }
  }
  .filtrate-box .row-box .scene-box-ul .filter-item {
    margin-left: 10px;
    color: #444;
  }
  .filtrate-box .row-box .scene-box-ul {
    .price-input {
      text-align: center;
      width: 39px;
      height: 24px;
      line-height: 24px;
    }
    .left-input {
      margin-left: 10px;
    }
    .search-price {
      margin-left: 10px;
      width: 57px;
      height: 25px;
      line-height: 25px;
    }
  }
  // 排序
  .sort-outer-box {
    margin: 5px 0;
    height: 30px;
    line-height: 30px;
    .sort1190 .sort-item {
      height: 30px;
      line-height: 30px;
    }
  }

  // 商品
  .car-list-box {
    padding: 0 1%;
    .type-item {
      width: 49% !important;
      height: 280px !important;
      .car-img {
        width: 190px !important ;
        height: 140px !important;
      }
      .car-name {
        margin: 0 !important;
        font-size: 14px !important;
        padding: 0 10px !important;
        min-height: 36px !important;
      }
      .car-des {
        padding: 0 10px !important;
      }
      .car-price {
        padding: 0 10px !important;
      }
      /deep/ .go-shop-btn {
        width: 70px;
        height: 24px;
        padding: 0;
        font-size: 14px;
        left: 10px;
        bottom: 14px !important;
      }
    }
    .type-item:nth-child(odd) {
      margin-right: 2%;
    }
    .type-item:nth-child(even) {
      margin-right: 0;
    }
  }
  .area1190 {
    width: 100%;
  }
}
</style>